<template>
  <div>
    <pre>
      后端分页+动态列案例：
      
      1.1、开启后端分页功能：设置backendPaging为true。
      1.2、设置后端分页查询的方法：设置backendPagingFunc事件属性。（组件会通过 $emit来触发调用该方法，传递参数：当前页码、每页条数、回调方法）
      1.3、通过 $refs 调用组件的 callback方法，传递分页信息给组件。（用于组件渲染表格）

      2.1、开启动态列功能：设置dynamicColumnSetting属性为true。
      2.2、设置列可见性：设置columnVisibles属性（初始为全true），并在每个列标签中使用v-if引用对应列下标的值。列下标从0开始。
      2.3、设置初始隐藏的列的下标数组：设置hidenColumnIndexs属性，列下标从0开始。
      2.4、设置不允许隐藏的列的下标数组：设置alwaysShowColumnIndexs属性，列下标从0开始。
      2.5、设置是否在checkbox显示不允许隐藏的列信息：设置showAlwaysShowColumnInCheckbox属性。
      2.6、通过表格字段定制功能动态设置展示列
    </pre>

    <PageTable
      :currentPage="2"
      :pageSizes="[20,5,10]"
      :pageSize="5"
      :paging="true"
      
      :backendPaging="true"
      @backendPagingFunc="queryTableData"
      
      :dynamicColumnSetting="true"
      :columnVisibles="columnVisibles"
      :hidenColumnIndexs="[3]"
      :alwaysShowColumnIndexs="[1,5]"
      :showAlwaysShowColumnInCheckbox="true"
      ref="dataTable"
    >
      <el-table-column type="selection" width="55" v-if="columnVisibles[0]"></el-table-column>
      <el-table-column label="账号" prop="name" v-if="columnVisibles[1]"></el-table-column>
      <el-table-column label="名称" prop="nickname" v-if="columnVisibles[2]"></el-table-column>
      <el-table-column label="邮箱" prop="email" v-if="columnVisibles[3]"></el-table-column>
      <el-table-column label="状态" v-if="columnVisibles[4]">
        <template slot-scope="scope">{{ scope.row.state%2===0?'正常':'锁定' }}</template>
      </el-table-column>
      <el-table-column label="操作" min-width="100" v-if="columnVisibles[5]">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click.stop="clickFunc(scope.row)">操作按钮</el-button>
        </template>
      </el-table-column>
    </PageTable>
  </div>
</template>

<script>
// 引入表格组件
import PageTable from "./PageTable.vue";

export default {
  components: {
    PageTable // 引用表格组件
  },
  data() {
    return {
      tableData: [],
      columnVisibles: new Array(6).fill(true)
    };
  },
  methods: {
    // 后台分页查询方法，由组件通过 $emit触发。参数为当前页码、每页条数、分页数据回调方法
    queryTableData(page, size, callback) {
      var params = {};
      params.size = size;
      params.page = page;

      console.log("模拟发送后台异步请求，耗时2s...", params);
      setTimeout(() => {
        // 模拟后台分页查询数据
        let total = 37, //总条数
          arr = new Array(total).fill().map((_, i) => {
            i = i + 1;
            return { name: i, nickname: i, email: i, state: i };
          }),
          pageData = arr.slice(
            (params.page - 1) * params.size,
            params.page * params.size
          );
        let result = {
          data: pageData,
          total: total
        };

        console.log("后台请求返回，执行组件回调方法", result);
        // 由于是后台分页，所以需要将当前页数据和总条数信息传递给组件。约定格式为：{data:[], total:10}
        callback(result);
        // this.$refs.dataTable.callback(result);
      }, 2000);
    },
    clickFunc(row) {
      // console.log(row);
      alert(JSON.stringify(row));
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
</style>
